<template>
  <el-container style="height: 100vh">
    <!-- 侧边栏 -->
    <el-aside width="240px" style="background: #ffffff; box-shadow: 2px 0 8px rgba(0,0,0,0.05)">
      <div class="sidebar-header">
        <h2>📚 管理后台</h2>
      </div>
      <el-menu
        :default-active="activeMenu"
        class="sidebar-menu"
        @select="handleMenuSelect"
      >
        <el-menu-item
          v-for="route in menuRoutes"
          :key="route.path"
          :index="route.path"
        >
          <el-icon><component :is="route.meta.icon" /></el-icon>
          <span>{{ route.meta.title }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主内容区 -->
    <el-container>
      <!-- 顶部导航 -->
      <el-header class="top-header">
        <div class="header-left">
          <h2>{{ currentTitle }}</h2>
        </div>
        <div class="header-right">
          <el-dropdown>
            <span class="user-info">
              <el-avatar :size="32" style="margin-right: 10px">
                {{ userInfo.realName ? userInfo.realName[0] : 'U' }}
              </el-avatar>
              {{ userInfo.realName }}
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <!-- 内容区域 -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()
const route = useRoute()

const userInfo = ref({})
const activeMenu = computed(() => route.path)

// 获取菜单路由
const menuRoutes = computed(() => {
  const adminRoute = router.options.routes.find(r => r.path === '/admin')
  return adminRoute ? adminRoute.children : []
})

// 当前页面标题
const currentTitle = computed(() => {
  return route.meta.title || '管理后台'
})

// 菜单选择
const handleMenuSelect = (index) => {
  router.push(index)
}

// 退出登录
const handleLogout = async () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const { authApi } = await import('@/api/auth')
      await authApi.logout()
    } catch (error) {
      // 即使登出失败也清除本地数据
    } finally {
      localStorage.removeItem('adminUser')
      ElMessage.success('已退出登录')
      router.push('/login')
    }
  })
}

// 加载用户信息
onMounted(() => {
  const user = localStorage.getItem('adminUser')
  if (user) {
    userInfo.value = JSON.parse(user)
  }
})
</script>

<style scoped>
.sidebar-header {
  padding: 24px 20px;
  background: white;
  color: #333;
  border-bottom: 1px solid #e8e8e8;
}

.sidebar-header h2 {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  color: #333;
}

.sidebar-menu {
  border-right: none;
}

.top-header {
  background: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  border-bottom: 1px solid #e8e8e8;
}

.header-left h2 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #333;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.user-info:hover {
  background: #f5f5f5;
}
</style>

